<template>
  <div class="home">
    <HomeHeader></HomeHeader>
    <HomeSwiper :list="homeInfo.swiperList"></HomeSwiper>
    <HomeNav :list="homeInfo.iconList"></HomeNav>
    <HomeRecommend :recommendList="homeInfo.recommendList" :weekendList="homeInfo.weekendList"></HomeRecommend>
  </div>
</template>

<script setup>
import HomeHeader from './components/HomeHeader.vue'
import HomeSwiper from './components/HomeSwiper.vue'
import HomeNav from './components/HomeNav.vue'
import HomeRecommend from './components/HomeRecommend.vue'
import axios from 'axios'
import { ref, onMounted } from 'vue'

const homeInfo = ref({})
const getHomeInfo = async () => {
  homeInfo.value =  await axios.get('/api/index.json').then(res => res.data.data)
  // homeInfo.value =  await axios.get('/public/mock/index.json').then(res => res.data.data)
  console.log(homeInfo.value)
}
onMounted(() => {
  getHomeInfo()
})
</script>

<style lang="scss" scoped>

</style>
